<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
const globalProxy = getCurrentInstance()?.appContext.config.globalProperties

defineProps<{ msg: string }>()

const count = ref(0)

//设置标题
const setTitle = () => {
  
}
//网络请求
const requestApi = () => {
  globalProxy?.$http.request(globalProxy.$api.index.index).then((d: any) => {
    console.log(d);
  })
  .catch((e: any) => {
    console.log(e);
  });
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>

  <div style="text-align: center;">
    <el-row>
      <el-button @click="setTitle">设置标题</el-button>
      <el-button type="primary" @click="requestApi">网络请求</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>

    <el-row style="margin-top:20px;">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </el-row>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
